<!-- 为你优选 -->
<template>
	<view class="prefer-content">
		<view class="prefer-title">
			为你优选
		</view>
		<scroll-view class="scroll" scroll-x="true" scroll-with-animation="true">
			<view class="prefer-dis">
				<block v-for="(item,index) in preferdata" :key="index">
					<view class="prefer-view">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{item.title}}</text>
						<text>{{item.lable}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		props:{
			preferdata:Array
		},
		name: "preference",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	.prefer-content {
		margin: 30rpx 0;
		padding-left:10rpx ;
		.prefer-title {
			font-size: 35rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 20rpx;
			margin-left: 8rpx;
		}
		.scroll{
			white-space: nowrap;
			width: 100%;
			height: 100%;
			
			.prefer-dis{
				display: flex;
				justify-content: space-between;
				
				view:nth-child(2){
				padding: 0 7rpx !important;	
				}
			
			
			.prefer-view{
				height: 300rpx;
				width: 300rpx;
				padding: 0 8rpx;
				
				image{
					width: 300rpx;
					height: 200rpx;
					border-radius: 8rpx;
					}
				text{
					height: 45rpx;
					line-height: 45rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					&:nth-child(2){
						font-size: 30rpx;
					}
					&:nth-child(3){
						font-size: 27rpx;
						color: #9c9c9c;
					}
				}
				
				}
			}
		}
	}
</style>
